<template>
  <Page name="登录">
    <div>
      <div class="tip fx fx-vc" v-if="showTip">
        <i class="ic ic-tip-yellow mr12"></i>
        <p class="flex">{{tip}}</p>
        <div class="close-wrap" @click="showTip = false">
          <i class="close"></i>
        </div>
      </div>
      <div class="list">
        <div :class="['item fx fx-vc', {'disabled': item.status == 0}]" v-for="item in exists" :key="item.uid" @click="pick(item.uid, item.status, item.origin, item.flow_status, item.level_type)">
          <div class="content flex">
            <dl>
              <dt>户口号:</dt>
              <dd>{{item.code}}</dd>
            </dl>
            <dl>
              <dt>{{item.type == 2 ? '全名/昵称' : '单位名称/单位简称'}}</dt>
              <dd>{{item.lema_name}}</dd>
            </dl>
            <dl>
              <dt>对接人角色:</dt>
              <dd>{{item.groups}}</dd>
            </dl>
          </div>
          <i class="arrow" v-if="item.status == 1"></i>
          <i class="yellow" v-else>审核中</i>
        </div>
      </div>
    </div>
  </Page>
</template>

<script>
import Page from '~/components/page';

export default {
  validate({params,redirect}){
    if(!params.token || !params.list){
      redirect('/login');
    }
    return true
  },
  asyncData({ store,route }) {
    return {
      exists:route.params.list,
      originType: route.query.originType,
      origin: route.query.origin
    };
  },
  data(){
    return {
      showTip:true,
      posting:false
    }
  },
  components:{
    Page,
  },
  computed: {
    tip (){
      let params = this.$route.params;
      let query = this.$route.query;
      let tip = '系统检测您已存在以下会员中，您可以点击会员信息进行登录'
      if(params.type == 'org' || params.type == 1) {
        if(query.isNew) {
          tip = '恭喜您成为我们乐马的机构会员，同时也为您申请了个人会员，请选择要登录的会员户口'
        } else {
          tip = '恭喜您成为我们乐马的机构会员，原有个人会员继续保留，请选择您要登录的会员户口'
        }
      }
      return tip
    }
  },
  methods: {
    async pick(uid, status, origin, flow_status, level_type){
      if(status != 1) return false;
      try{
        if(this.posting) return false;
        this.posting = true;
        let param = {
          uid:this.$store.getters.getUid,
          pid:uid,
          token:this.$store.getters.getToken,
          origin: this.origin,
          originType: level_type,
        }

        let { data: rs } = await this.$axios.post('?ct=api&ac=select_member',param);
        if(rs.code === 0){
          const { data } = rs;
          //登录成功设置token
          this.$store.commit('SET_USER',data);
          this.$store.commit('SET_UID',data.uid);
          this.$store.commit('SET_TOKEN',data.token);

          //登录成功后跳到首页  -- 是否完善资料+扫描进来
          if(flow_status == 0 && this.origin == 4) {
            this.$router.push({name:'complete_info'});
          } else {
            this.$router.replace('/');
          }

        }else{
          this.$toast(rs.msg);
        }
      }catch(e){
        this.$error(e);
      }
      this.posting = false;
    }
  }
}
</script>

<style lang="less" scoped>

  .list {
    padding:0 20px 20px;
  }
  .tip p{
    white-space: normal;
  }
  .item {
    margin-top:20px;
    padding:30px;
    background-color:#fff;
    border-radius: 8px;

    .content {
      .text-ellipsis();
      color:#292929;

      p {
        font-size:30px;
      }

      dl {
        margin-top:16px;
        display: flex;
        font-size:24px;
      }
      dt {
        color:#9a9a9a;
        margin-right:10px;
      }
      dd {
        flex:1;
      }
      p,dt,dd {
        .text-ellipsis();
      }
    }
  }

  .item.disabled .content dd {
    color: #9a9a9a;
  }

  .arrow {
    margin-left:30px;
    display: block;
    width:14px;
    height:14px;
    border-right: 1px solid #9a9a9a;
    border-bottom: 1px solid #9a9a9a;
    transform: rotate(-45deg)
  }

  .yellow {
    color: #d39b00;
  }

  .sticky-box {
    position: fixed;
    left:0;
    bottom:0;
    width:100%;
    padding:50px;
    box-shadow: 0 1px 5px 0 #f5f6fa;
    background-color:#fff;
  }
</style>
